<template>
    <div class="entryExitStatisticsContent">
        <img src="@/assets/bigScreen/icons/left/moduls_bg.png" alt="">
        <div class="titles_moduls">
            <img src="@/assets/bigScreen/icons/right/jctj.png" alt="">
            进出统计
        </div>

        <div class="tab_group">
            <div @click="changeTab(index)" :class="tabIndex == index ? 'tab_item_active' : 'tab_item'"
                v-for="(item, index) in tabData" :key="index">
                {{ item.label }}
            </div>
        </div>


        <div class="content_box">
            <img src="@/assets/bigScreen/icons/right/header_img.png" alt="">

            <div class="infs_items_box">
                <div class="infs_items_box_item">
                    <img src="@/assets/bigScreen/icons/right/header_infs_bg.png" alt="">
                    <div>
                        进出{{ tabIndex == 0 ? '人员' : '车辆' }}：<span>{{ dataInfs.personName || dataInfs.licensePlate
                            }}</span>
                    </div>
                </div>
                <div class="infs_items_box_item">
                    <img src="@/assets/bigScreen/icons/right/header_infs_bg.png" alt="">
                    <div>
                        进场时间：<span>{{ dataInfs.enterTime }}</span>
                    </div>
                </div>
                <div class="infs_items_box_item">
                    <img src="@/assets/bigScreen/icons/right/header_infs_bg.png" alt="">
                    <div>
                        出场时间：<span>{{ dataInfs.exitTime }}</span>
                    </div>
                </div>
                <div class="infs_items_box_item">
                    <img src="@/assets/bigScreen/icons/right/header_infs_bg.png" alt="">
                    <div>
                        停留时长：<span>{{ dataInfs.stayTime }}</span>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
import { getEntryExitStatisticsP, getEntryExitStatisticsC } from "@/api/bigScreen/home.js";



export default {
    components: {
    },
    data() {
        return {
            tabIndex: 0,
            tabData: [
                {
                    label: '人员'
                },
                {
                    label: '车辆'
                }
            ],
            dataInfs: {
                personName: '',
                enterTime: '',
                exitTime: '',
                stayTime: '',
                licensePlate: ''
            }
        };
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            getEntryExitStatisticsP().then(res => {
                if (res.code == 200) {
                    // console.log(res.data);
                    this.dataInfs = res.data
                }
            })
        },
        getCarData(index) {
            this.tabIndex = index
            getEntryExitStatisticsC().then(res => {
                if (res.code == 200) {
                    this.dataInfs = res.data
                }
            })
        },
        changeTab(index) {
            this.tabIndex = index
            index == 0 ? this.getData() : this.getCarData(index)
        }
    },
};
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'kk';
    src: url('../../../../../assets/font/kuaikanshijieti-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'al';
    src: url('../../../../../assets/font/Alibaba-PuHuiTi-Bold_0.ttf');
    font-weight: normal;
    font-style: normal;
}

.entryExitStatisticsContent {
    width: 100%;
    position: relative;
    margin: 2.5% 0;

    img {
        width: 100%;
    }


    .titles_moduls {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: absolute;
        top: 3%;
        left: 1.5%;

        img {
            width: 1.2vw;
            margin-right: 0.5208vw;
        }


        font-size: 0.8333vw;
        font-weight: 400;
        letter-spacing: 0.0208vw;
        font-family: kk;
        color: transparent;
        background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
        -webkit-background-clip: text;
        background-clip: text;

    }

    .tab_group {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        right: 3%;
        top: 5%;

        .tab_item,
        .tab_item_active {
            font-size: 0.7292vw;
            font-weight: 400;
            letter-spacing: 0.4px;
            color: transparent;
            background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            font-family: kk;
            opacity: 1;
            cursor: pointer;
            margin-left: 15%;
            transition: all 0.3s ease;

        }

        .tab_item {
            opacity: .5;
        }
    }


    .content_box {
        width: 96%;
        height: 11.9792vw;
        position: absolute;
        top: 17%;
        right: 2%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 28%;
            margin: 0 3%;
        }

        .infs_items_box {
            width: 60%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;


            &_item { 
                width: 100%;
                height: 1.6667vw;
                font-size: 0.7292vw;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                position: relative;

                img {
                    width: 100%;
                }
       
                div {
                    width: 100%;
                    position: absolute;
                    top: 15%;
                    left: 1%;
                    padding-left: 17%;
                }

                span {
                    font-family: kk;
                }
            }
        }
    }

}
</style>